<template>
  <div>
    <div class="first">
      <div class="title">步骤一.获取中标结果公告</div>

      <el-date-picker
        style="margin-left: 20px"
        v-model="startDate"
        type="date"
        placeholder="选择日期"
        :clearable="false"
      >
      </el-date-picker>
      <el-button
        type="warning"
        size="medium"
        icon="el-icon-video-play"
        :loading="loading"
        @click="execute"
        style="margin-left: 20px"
        >执行</el-button
      >
    </div>
    <div class="main">
      <div class="second">
        <div class="table">
          <div class="title">操作进度</div>
          <el-table
            :data="progressData"
            height="250"
            border
            style="width: 100%; height: 100%"
            ref="TestTable"
          >
            <el-table-column prop="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="message" label="操作详情"> </el-table-column>
            <el-table-column prop="addTime" label="操作时间" width="240">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="three">
        <div class="table">
          <div class="title">错误信息</div>
          <el-table
            :data="errorData"
            height="250"
            border
            style="width: 100%; height: 100%"
            ref="TestTable2"
          >
            <!-- <el-table-column prop="index" label="序号" width="80">
            </el-table-column> -->
            <el-table-column
              v-for="item in tableColumn"
              :key="item.index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
            >
            </el-table-column>
            <!-- <el-table-column prop="batchNumber" label="供货单号" width="300">
            </el-table-column>
            <el-table-column prop="contractNumber" label="合同编号" width="300">
            </el-table-column>
            <el-table-column prop="message" label="错误详情"> </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { execute, examLog, examError } from "@/common/api";
import table from "@/untils/table";
import { convertLongDateToYMD } from "@/untils/trans";
export default {
  name: "WinningBid",
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      progressData: [],
      errorData: [],
      timer: null,
      tableColumn: [],
      startDate: new Date(),
    };
  },
  methods: {
    selectTable() {
      let value = localStorage.getItem("module");
      if (value == "1") {
        this.tableColumn = table.constract;
      }
      if (value == "3") {
        this.tableColumn = table.order;
      }
    },
    execute() {
      this.loading = true;
      let url = "api/contract/batch/Announcement";
      console.log(this.startDate, "9999");
      execute(url, {
        startDate: convertLongDateToYMD(this.startDate),
      })
        .then((res) => {
          this.loading = false;
          if (res.success == 1) {
            this.$successMsg(res.message);
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$errorMsg("接口异常");
        });
    },
    examLog() {
      let param = {
        funName: localStorage.getItem("moduleText"),
        processCode: 1,
      };
      examLog(param)
        .then((res) => {
          if (res.success == 1) {
            this.progressData = res.data;
            this.progressData.forEach((i, index) => {
              i.index = index + 1;
            });
            // this.$nextTick(() => {
            //   this.$refs.TestTable.bodyWrapper.scrollTop =
            //     this.$refs.TestTable.bodyWrapper.scrollHeight;
            // });
          } else {
            // this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          // this.$errorMsg("接口异常");
        });
    },
    examError() {
      let param = {
        funName: localStorage.getItem("moduleText"),
        processCode: 1,
      };
      examError(param)
        .then((res) => {
          if (res.success == 1) {
            this.errorData = res.data;
            this.errorData.forEach((i, index) => {
              i.index = index + 1;
            });
            // this.$nextTick(() => {
            //   this.$refs.TestTable2.bodyWrapper.scrollTop =
            //     this.$refs.TestTable2.bodyWrapper.scrollHeight;
            // });
          } else {
          }
        })
        .catch((err) => {});
    },
  },
  created() {
    this.selectTable();
    this.examLog();
    this.examError();
    this.timer = setInterval(() => {
      this.examLog();
      this.examError();
    }, 3000);
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>


<style lang="scss" scoped>
.first {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 10px 20px;
  .title {
    font-size: 22px;
    font-weight: bold;
    color: #249087;
  }
}
.main {
  display: flex;
  flex-direction: column;
  // height: calc(100vh - 58px - 70px);
}
.second {
  padding: 10px 20px;
  //   height: calc((100vh - 58px) / 2);
  .table {
    padding: 10px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.1); /* 可以添加多个阴影效果 */

    .title {
      margin-bottom: 10px;
      font-size: 20px;
      color: #249087;
      font-weight: bold;
    }
  }
}
.three {
  padding: 10px 20px;
  //   height: calc((100vh - 58px) / 2);
  .table {
    padding: 10px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.1); /* 可以添加多个阴影效果 */

    .title {
      margin-bottom: 10px;
      font-size: 20px;
      color: orange;
      font-weight: bold;
    }
  }
}
</style>
